<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery/jquery-1.8.3.js"></script>
</head>
<body>
<script type="text/javascript">
    //js原生实现ajax
    function fun() {

        //创建对象
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //向服务器发送请求,true是异步，false是同步
        xmlhttp.open("GET", "servlet", true)
        //获取服务器响应的状态，如果是200，说明响应结果来了，这时客户端就需要去获取结果
        /*  readyState 5种状态
        *  0: 请求未初始化
        *  1: 服务器连接已建立
        *  2: 请求已接收
        *  3: 请求处理中
        *  4: 请求已完成，且响应已就绪
        *
        *当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
        * */
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            }
        }

        //如果是get请求，send发送空的，如果是post请求，send就带参数
        xmlhttp.send();

        //

    }
</script>

<script>
    //$.ajax方式
    function f() {
        $.ajax({
            url: "ajaxservlet",//请求路径
            type: "post",//请求方式
            data: {"username": tom, "age": 28}, //请求参数
            success: function (data) {   //响应数据
                alert(data)
            },
            error: function () {
                alert("出错")
            },
            dataType: "text",  //设置响应返回来的数据类型


        })
    }
</script>

<script>
    //jquery $.get 和 $.post方式
    //$.get(url,[data],[callback],[type])
    /*参数：
        url:请求路径
        data:请求参数
        callback:回调函数
        type:响应结果的类型
    */
    $.get("servlet", {username: "tom"}, function (data) {
        alert("回调函数" + data);
    }, "text");


</script>
<script>
    //jquery $.get 和 $.post方式
    //$.post(url,[data],[callback],[type])
    /*参数：
        url:请求路径
        data:请求参数
        callback:回调函数
        type:响应结果的类型
    */
    $.get("servlet", {username: "tom"}, function (data) {
        alert("回调函数" + data);
    }, "text");


</script>


<button type="button" id="btn1" onclick="fun()">发送请求</button>
</body>
</html>